<!--
 * @Author       : wfl
 * @LastEditors: ww
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-05-10 10:57:54
 * @LastEditTime: 2023-06-28 16:23:25
-->
<script setup lang="ts" name="InitiateApproval">
import { ElMessage } from 'element-plus'
import { useLinear } from '@main/views/approve-workflow/useLinear'

const groupForms: Ref<
  Array<{
    name: string
    [key: string]: any
    forms: Array<any>
  }>
> = ref([])
const router = useRouter()
const loading = ref(true)
useGroup({
  initiatorViewOnly: true,
  name: ''
}).then(({ success, data, msg }) => {
  loading.value = false
  if (success)
    groupForms.value = data.filter((v: { id: string; }) => v.id !== 'DISABLED')
  else
    ElMessage.error(msg)
})

const handSubmitApply = async ({ id }: { id: string; }) => {
  router.push({
    name: 'WaitApply',
    query: { id }
  })
}

// const checkOverflow = (dom: HTMLElement) => {
//   return ikDom.checkTextOverfolw(dom)
// }

const { getLinearGradient } = useLinear()
</script>

<template>
  <div v-loading="loading" class="flow-list">
    <template v-for="item in groupForms" :key="item.id">
      <div class="group">
        <p class="group-title">
          <!-- <i class="ikflow ikflow-shuqian"></i> -->
          {{ item.name }}
        </p>
        <div>
          <el-card
            v-for="form in item.forms"
            :key="form.id"
            class="group-list"
            shadow="hover"
            @click="handSubmitApply(form)"
          >
            <div class="form-icon" :style="{ backgroundImage: getLinearGradient(form?.iconBackground) }">
              <i :class="`ikflow ${form.icon}`"></i>
            </div>
            <span :title="form.name" class="form-name text-over-line">{{ form.name }}</span>
          <!-- TODO 优化显示效果 -->
          <!-- <el-tooltip
            v-else
            placement="top"
            trigger="hover"
            :enterable="false"
            :content="form.name"
          >
            <span class="form-name text-over-line">{{ form.name }}</span>
          </el-tooltip> -->
          </el-card>
        </div>
      </div>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.flow-list {
  padding: 0 0 0 16px;
  color: var(--el-text-color-primary);

  .group {
    margin-bottom: 16px;

    .group-title {
      padding: 16px 0;
      font-size: 16px;
      color: var(--el-text-color-secondary);
    }

    .group-list {
      width: 296px;
      display: inline-block;
      margin-right: 18px;
      cursor: pointer;
      margin-bottom: 12px;
      border: none;
      background-color: var(--ik-page-tag);
      border-radius: 6px;

      :deep(.el-card__body) {
        padding: 12px;
        display: inline-flex;
        width: 100%;
        align-items: center;
      }
    }
  }
}

.form-icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  margin-right: 16px;

  i {
    color: #fff;
    font-size: 27px;
  }
}

.form-name {
  display: inline-block;
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
</style>
